<template>
  <div class="container">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="zw-search-form" label-position="right" label-width="auto" :inline="true">
      <el-row class="el-row" :gutter="20" style="margin-left: -12px; margin-right: -12px">
        <el-col :span="8">
          <el-form-item label="标签组类别">
            <el-select v-model="ruleForm.tag_list" default-first-option clearable multiple placeholder="全部">
              <el-option v-for="item in tagsData" :key="item.id" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签搜索">
            <el-input v-model="ruleForm.keyword" placeholder="输入标签组、标签名进行查找" :suffix-icon="Search" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" style="float: right">清空</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)" style="float: right; margin-right: 10px">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="newTag">
      <div class="time">最近一次同步时间为：{{ updateTime }}</div>
      <div class="btn">
        <el-button type="primary" @click="openCreateTag" style="margin-right: 17px" v-auth="'ADD_CUSTOMER_LABEL_GROUP'">新建客户标签组</el-button>
        <el-dropdown>
          <el-button>
            更多操作<el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="synchronization" v-auth="'SYNC_WECOM'">同步至企微</el-dropdown-item>
              <el-dropdown-item @click="merge" v-auth="'MERGE_WECOM_LABEL'">合并企微标签</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <ZWCreateTag ref="createTag" @submit="tagList"/>
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import ZWCreateTag from '../../../components/ZWCreateTag.vue'
import { getSetionId } from '@/utils/utils'
import bus from '@/utils/bus'
import { getSyncTime } from '@/api/customerCenter/groupManage'
import ZWSelectTag from '../../../components/ZWSelectTag.vue'
import { syncWE, syncToQW } from '@/api/customerCenter'
import { addTags, getTagsList } from '@/api/customerCenter'

type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
// 选择标签options
const AllTags = ref([])
const tagsData = ref([])
const createTag = ref(null)
const searchSelectRef = ref(null)
let updateTime = ref('')
const ruleForm = reactive({
  keyword: '',
  tag_list: ''
})

const emit = defineEmits(['search'])
const props = defineProps(['allTags'])
// 打开选择标签
const selecTag = () => {
  searchSelectRef.value.showCreatTag = true
  searchSelectRef.value.appDialog.visible = true
  searchSelectRef.value.selectTags = AllTags.value
}
// 获取标签
const getTags = (data: any) => {
  AllTags.value = data
  ruleForm.tag_list = getSetionId('id', data)
}
const changeTag = (data: any) => {
  let arr: any[] = AllTags.value.filter((item: any) => data.includes(item.id))
  ruleForm.tag_list = getSetionId('id', arr)
  AllTags.value = arr
}
const openCreateTag = () => {
  createTag.value.appDialog.visible = true
  createTag.value.appDialog.title = '新建客户标签组'
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      emit('search', ruleForm)
    } else {
      return false
    }
  })
}
const tagList = () => {
  getTagsListFun()
  resetForm()
}
// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  ruleForm.keyword = ''
  ruleForm.tag_list = ''
  emit('search', ruleForm)
}
// 同步至企微
const synchronization = () => {
  syncWE().then((res: any) => {
    ElMessage.success('同步成功')
  })
}
// 合并至企微
const merge = async () => {
  await syncToQW()
  ElMessage.success('合并成功')
}
const getSyncTimeFun = () => {
  getSyncTime({ sync_type: 100 }).then((r: any) => {
    updateTime.value = r.weiwork_synctime
  })
}
getSyncTimeFun()
// 标签类型
const getTagsListFun = () => {
  getTagsList().then((r: any) => {
    tagsData.value = r
  })
}
getTagsListFun()
defineExpose({ getTagsListFun})
</script>
<style scoped lang="scss">
.container {
  .demo-ruleForm {
    padding: 16px 20px;
    height: 56px;
    background: #f9f9f9;
  }
  :deep .el-form-item {
    margin-bottom: 0;
  }
  .newTag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    .time {
      font-size: 14px;
      font-weight: 300;
      color: #33302d;
    }
  }
}
.zw-search-form {
  padding: 16px;
  background-color: #f9f9f9;
  .el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    margin: -8px -10px;
    .el-col {
      margin: 8px 0;
      &:last-of-type {
        flex: auto;
        text-align: right;
      }
      .el-form-item {
        margin-bottom: 0;
        width: 100%;
        .el-form-item__label-wrap {
          .el-form-item__label {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
          }
        }

        .el-form-item__content {
          .el-input,
          .el-select,
          .el-date-editor {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
